import React, {useEffect, useState, useImperativeHandle} from 'react'
import {Button, message, Tag} from 'antd'
import CustomTable from '@/components/Table'
import {
	licenseProperty,
	isCarHailingCheck,
	certStatus,
	invStatus,
} from '../../../dict'
// api调用
import {getTableList, postPlateReg} from '@/service/carMessage/archives'
import Permissions from '@/components/Permissions'

function PendingTable(props: {
	id: any
	type: any
	search: any
	companyId: any
	processId: any
	tableCallback: (data: any) => void
	cRef: any
}) {
	const {id, type, search, companyId, processId, cRef, tableCallback} = props
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})

	const [total, setTotal] = useState(0)
	const [loading, setLoading] = useState(false)
	const [tableList, setTableList] = useState<any[]>([])
	const [checkData, setCheckData] = useState<any>()
	const [columns, setColumns] = useState<any>([])

	useEffect(() => {
		tableCallback(checkData)
	}, [checkData])
	// 获取表格数据
	const onListFun = () => {
		setLoading(true)
		getTableList({
			...params,
			...search,
			companyId,
			processId,
			houseType: type,
		})
			.then((res: any) => {
				if (res?.success) {
					setTableList(() => res?.data?.records)
					setTotal(res?.data?.total)
				}
				setLoading(false)
			})
			.catch(() => {
				setLoading(false)
			})
	}
	// 获取表格数据
	// // 自定义一个初始不更新的hook
	// const useUpdateEffect = (fn: Function, inputs: any[]) => {
	// 	const didMountRef = useRef(false)
	// 	useEffect(() => {
	// 		if (didMountRef.current) fn()
	// 		else didMountRef.current = true
	// 	}, inputs)
	// }

	// // 使用自定义hook
	// useUpdateEffect(onListFun, [params])
	const plateRegFun = (carId: number) => {
		// 上牌
		postPlateReg(carId).then((res: any) => {
			if (res?.success) {
				setParams({
					current: 1,
					size: 10,
				})
				onListFun()
				message.success(res?.msg)
			}
		})
	}
	useEffect(() => {
		if (processId) {
			onListFun()
		}
	}, [params])
	useEffect(() => {
		// 待办证列表
		let columnList: any
		if (type === '4') {
			columnList = [
				{
					title: '序号',
					dataIndex: 'order',
					align: 'center',
					width: 70,
					render(text: any, record: any, index: any) {
						return (
							<span>{(params.current - 1) * 10 + index + 1}</span>
						)
					},
				},
				{
					title: '车架号',
					dataIndex: 'vin',
					align: 'center',
					width: 220,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '发动机号',
					dataIndex: 'engineNumber',
					align: 'center',
					width: 150,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '品牌车系车型',
					dataIndex: 'carBrandSeries',
					align: 'center',
					width: 250,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '车辆性质',
					dataIndex: 'carProperty',
					align: 'center',
					width: 200,
					render: (text: number, record: any) => (
						<>
							{licenseProperty?.map(
								(item: {key: number; label: string}) => {
									if (item?.key === text) {
										return (
											<Tag
												color="processing"
												key={record?.id}>
												{item?.label}
											</Tag>
										)
									}
									return null
								},
							)}
						</>
					),
				},

				{
					title: '持有方',
					dataIndex: 'holderName',
					align: 'center',
					width: 200,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '所属公司',
					dataIndex: 'companyName',
					align: 'center',
					width: 200,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '入库城市',
					dataIndex: 'cityName',
					align: 'center',
					width: 200,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '颜色',
					dataIndex: 'colorName',
					align: 'center',
					width: 200,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '停车场名称',
					dataIndex: 'parkingName',
					align: 'center',
					width: 200,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '操作',
					key: 'action',
					align: 'center',
					width: 100,
					fixed: 'right',
					render: (text: any, record: {carId: any}) => (
						<>
							<div>
								<Permissions permissionID="amc_assetCenter_carMessage_archives_licensing">
									<Button
										type="link"
										size="small"
										onClick={() => {
											plateRegFun(record.carId)
										}}>
										上牌
									</Button>
								</Permissions>
							</div>
						</>
					),
				},
			]
		} else if (type === '13' || type === '14') {
			columnList = [
				{
					title: '序号',
					dataIndex: 'order',
					align: 'center',
					width: 70,
					render(text: any, record: any, index: any) {
						return (
							<span>{(params.current - 1) * 10 + index + 1}</span>
						)
					},
				},
				{
					title: '车牌号',
					dataIndex: 'number',
					align: 'center',
					width: 200,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '车架号',
					dataIndex: 'vin',
					align: 'center',
					width: 220,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '发动机号',
					dataIndex: 'engineNumber',
					align: 'center',
					width: 150,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '品牌车系车型',
					dataIndex: 'carBrandSeries',
					align: 'center',
					width: 250,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '合格证接收状态',
					dataIndex: 'certStatus',
					align: 'center',
					width: 250,
					render: (text: number, record: any) => (
						<>
							{certStatus?.map(
								(item: {key: number; label: string}) => {
									if (item?.key === text) {
										return (
											<Tag
												color="processing"
												key={record?.id}>
												{item?.label}
											</Tag>
										)
									}
									return ''
								},
							)}
						</>
					),
				},
				{
					title: '发票接收状态',
					dataIndex: 'invStatus',
					align: 'center',
					width: 250,
					render: (text: number, record: any) => (
						<>
							{invStatus?.map(
								(item: {key: number; label: string}) => {
									if (item?.key === text) {
										return (
											<Tag
												color="processing"
												key={record?.id}>
												{item?.label}
											</Tag>
										)
									}
									return null
								},
							)}
						</>
					),
				},
				{
					title: '购置税',
					dataIndex: 'purchaseTax',
					align: 'center',
					width: 150,
					render: (text: string) => (
						<span>{text && Number(text) >= 0 ? text : '--'}</span>
					),
				},
				{
					title: '车辆性质',
					dataIndex: 'carProperty',
					align: 'center',
					width: 200,
					render: (text: number, record: any) => (
						<>
							{licenseProperty?.map(
								(item: {key: number; label: string}) => {
									if (item?.key === text) {
										return (
											<Tag
												color="processing"
												key={record?.id}>
												{item?.label}
											</Tag>
										)
									}
									return null
								},
							)}
						</>
					),
				},
				{
					title: '持有方',
					dataIndex: 'holderName',
					align: 'center',
					width: 200,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '所属公司',
					dataIndex: 'companyName',
					align: 'center',
					width: 200,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '入库城市',
					dataIndex: 'cityName',
					align: 'center',
					width: 200,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '颜色',
					dataIndex: 'colorName',
					align: 'center',
					width: 200,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '停车场名称',
					dataIndex: 'parkingName',
					align: 'center',
					width: 200,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '有无网约车运营检',
					dataIndex: 'isCarHailingCheck',
					align: 'center',
					width: 250,
					render: (text: number, record: any) => (
						<>
							{isCarHailingCheck?.map(
								(item: {key: number; label: string}) => {
									if (item?.key === text) {
										return (
											<Tag
												color="processing"
												key={record?.id}>
												{item?.label}
											</Tag>
										)
									}
									return ''
								},
							)}
						</>
					),
				},
			]
		} else {
			columnList = [
				{
					title: '序号',
					dataIndex: 'order',
					align: 'center',
					width: 70,
					render(text: any, record: any, index: any) {
						return (
							<span>{(params.current - 1) * 10 + index + 1}</span>
						)
					},
				},
				{
					title: '车架号',
					dataIndex: 'vin',
					align: 'center',
					width: 220,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '发动机号',
					dataIndex: 'engineNumber',
					align: 'center',
					width: 150,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '品牌车系车型',
					dataIndex: 'carBrandSeries',
					align: 'center',
					width: 250,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '车辆性质',
					dataIndex: 'carProperty',
					align: 'center',
					width: 150,
					render: (text: number, record: any) => (
						<>
							{licenseProperty?.map(
								(item: {key: number; label: string}) => {
									if (item?.key === text) {
										return (
											<Tag
												color="processing"
												key={record?.id}>
												{item?.label}
											</Tag>
										)
									}
									return null
								},
							)}
						</>
					),
				},
				{
					title: '合格证接收状态',
					dataIndex: 'certStatus',
					align: 'center',
					width: 250,
					render: (text: number, record: any) => (
						<>
							{certStatus?.map(
								(item: {key: number; label: string}) => {
									if (item?.key === text) {
										return (
											<Tag
												color="processing"
												key={record?.id}>
												{item?.label}
											</Tag>
										)
									}
									return null
								},
							)}
						</>
					),
				},
				{
					title: '发票接收状态',
					dataIndex: 'invStatus',
					align: 'center',
					width: 250,
					render: (text: number, record: any) => (
						<>
							{invStatus?.map(
								(item: {key: number; label: string}) => {
									if (item?.key === text) {
										return (
											<Tag
												color="processing"
												key={record?.id}>
												{item?.label}
											</Tag>
										)
									}
									return null
								},
							)}
						</>
					),
				},
				{
					title: '持有方',
					dataIndex: 'holderName',
					align: 'center',
					width: 200,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '所属公司',
					dataIndex: 'companyName',
					align: 'center',
					width: 200,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '入库城市',
					dataIndex: 'cityName',
					align: 'center',
					width: 200,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '颜色',
					dataIndex: 'colorName',
					align: 'center',
					width: 200,
					render: (text: string) => <span>{text || '--'}</span>,
				},
				{
					title: '停车场名称',
					dataIndex: 'parkingName',
					align: 'center',
					width: 200,
					render: (text: string) => <span>{text || '--'}</span>,
				},
			]
		}
		setColumns(() => columnList)
	}, [type])

	useImperativeHandle(cRef, () => ({
		// changeVal 就是暴露给父组件的方法
		refushList: () => {
			setParams({
				current: 1,
				size: 10,
			})
		},
	}))

	return (
		<>
			<CustomTable
				params={params}
				columns={columns}
				pagination
				kid={id}
				total={total}
				scroll={{y: 300}}
				callback={(pagination: any) => {
					setParams(pagination)
				}}
				showRowSelection
				selectCallback={(keys: any, selectData: any) => {
					setCheckData(selectData)
				}}
				loading={loading}
				dataSource={tableList}
			/>
		</>
	)
}
export default PendingTable
